<template>
  <view class="">
    <view class="top">
      <div class="videotype" :style="{marginTop: statusBarHeight + 'px'}">
        <image src="../static/return.png" mode="widthFix" @click="back"></image>
        <u-search placeholder="点击搜索你想要的壁纸" v-model="keyword" @search="serachBtn(keyword)"></u-search>
        <u-icon name="list-dot"></u-icon>
      </div>
      <!-- <view class="indexzxitem10">
        <view class="index_flex">
          <text class="indexzx_te1">专题视频</text><text style="color:#c19a46;">-有你喜欢的</text>
        </view>
        <view class="index_flex2">
          <text class="indexzx_te2">立即查看</text>
          <image src="@/static/img/ckgd.png" mode="widthFix"></image>
        </view>
      </view> -->
      <view class="indexbox4" @click="setStyle()" v-if="type != 'pc'">
        <view :class="'indexbox_left' + index" v-for="(item,index) in imageList.slice(0,3)" :key="index">
          <view class="inox_left_img" :style="{'backgroundImage':'url('+item.images+')' }">
          </view>
        </view>
      </view>
      <view style="height: calc(100vh - 150rpx);overflow: auto;">
        <view class="indexbox">
          <view :class="isClass == 0? 'indexbox_left':isClass == 1?'indexbox_left1': 'indexbox_left2'"
            v-for="(item,index) in imageList" :key="index">
            <view @click="playBtn(item)">
              <image v-if="isClass == 1" class="inox_left_img" :src="item.images" mode="widthFix"></image>
              <view v-else class="inox_left_img" :style="{'backgroundImage':'url('+item.images+')' }"></view>
            </view>
            <!-- <view :class="isClass == 1?'inl_content':'inl_content'">{{ item.name }}</view> -->
          </view>
        </view>
      </view>
      
    </view>
    <!-- 底部分页器 -->
    <view class="bottom">
      <uni-section title="默认样式" type="line" padding>
        <uni-pagination @change="change" pageSize="20" :total="total" title="标题文字" />
      </uni-section>
    </view>

    <loading v-show="isLoading"></loading>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isLoading: false,
        isClass: 0,
        page: 1,
        imageList: [],
        keyword: '',
        statusBarHeight: 0,
        timer: null,
        type: '',
        num: 3,
        userName: '',
        apiUrl: '',
        total: 0
      }
    },
    created() {
      this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'] + 10;
    },
    onLoad(opt) {
      this.userName = uni.getStorageSync('userInfo').nickName;
      this.type = opt.type
      if (this.type == 'pc') {
        this.num = 0
      } else {
        this.isClass = 2;
      }
      if (this.type == 'pc') {
        this.apiUrl = 'pcimage'
      } else if (this.type == 'phone') {
        this.apiUrl = 'appimage'
      } else {
        this.apiUrl = 'imagesBase'
      }
      this.isLoading = true
      this.getImageList()
    },
    onReachBottom() {
      uni.showLoading({
        title: '加载中'
      });
      this.page++
      this.getImageList(1)
    },
    methods: {
      change(e) {
        this.isLoading = true
        this.page = e.current
        console.log(e.current);
        this.$uniCloud(this.apiUrl, {
          type: 'get',
          page: this.page,
          num: 20
        }).then(res => {
          if (res.result) {
            this.imageList = res.result[1].data.reverse()
            this.isLoading = false
          }
        })
      },
      setStyle() {
        if (this.isClass > 2) this.isClass = -1
        this.isClass++

      },
      // 点击图片之后的操作
      playBtn(item) {
        if (this.type == 'change') {
          this.$store.commit('editAddress', images)
          uni.navigateBack()
        } else {
          var _this = this;
          if (this.userName == '你瞅啥') {
            uni.showActionSheet({
              // itemList按钮的文字接受的是数组
              itemList: ["设置为手机壁纸", "设置为电脑壁纸", "删除该壁纸", "查看该图片"],
              success(e) {
                if (e.tapIndex == 0) {
                  _this.phoneUplate(item.name, item.images, 'appimage')
                  // 手机壁纸
                } else if (e.tapIndex == 1) {
                  // 电脑壁纸
                  _this.phoneUplate(item.name, item.images, 'pcimage')
                } else if (e.tapIndex == 2) {
                  _this.deleBtn(item.name)
                } else if (e.tapIndex == 3) {
                  uni.previewImage({
                    urls: [item.images]
                  });
                }
              }
            })
          } else {
            uni.previewImage({
              urls: [item.images]
            });
          }
        }
      },
      // 添加=为什么壁纸
      phoneUplate(title, image, url) {
        this.$uniCloud(url, {
          type: 'add',
          name: title,
          images: image,
        }).then(res => {
          uni.showToast({
            title: res.result.msg
          })
        })
      },
      // 删除壁纸
      deleBtn(name) {
        // this.imageList.forEach((item,index,arr)=>{
        //   if(name == item.name) {
        //     arr.splice(index,index+1)
        //   }
        // })
        this.$uniCloud(this.apiUrl, {
          type: 'delete',
          name: name,
        }).then(res => {
          uni.showToast({
            title: '删除成功'
          })
        })
      },
      // 点击搜索
      serachBtn(word) {
        this.isLoading = true;
        this.$uniCloud('imagesBase', {
          type: 'search',
          name: word
        }).then(res => {
          if (res.result) {
            // this.imageList = res.result.data
            this.isLoading = false;
            uni.navigateTo({
              url: '/pagesB/imageList/index?word=' + word
            })
            clearTimeout(this.timer)
          }
        })
        this.timer = setTimeout(() => {
          this.isLoading = false;
        }, 5000)
      },
      // 获取图片列表
      getImageList(index) {
        this.$uniCloud(this.apiUrl, {
          type: 'get',
          page: this.page,
          num: 20
        }).then(res => {
          if (res.result) {
            if (index == 1) {
              this.imageList = this.imageList.concat(res.result[1].data.reverse())
              uni.hideLoading()
            } else {
              this.total = res.result[0].total
              this.imageList = res.result[1].data.reverse()
              this.isLoading = false
            }
          }
        })
      },
      // 获取图片列表
      async asyncGetImageList(index) {
        try {
          const res = await this.$uniClod(this.apiUrl, {
            type: 'get',
            page: this.page,
            num: 20
          })
          if (res.result) {
            if (index == 1) {
              this.imageList = this.imageList.concat(res.result[1].data.reverse())
              uni.hideLoading()
            } else {
              this.total = res.result[0].total
              this.imageList = res.result[1].data.reverse()
              this.isLoading = false
            }
          }
        }
        catch (err) {
          console.log(err, '返回错误');
        }

      }
    }

  }
</script>

<style lang="less">
  .bottom {
    height: 30px;
  }

  .top {
    height: calc(100vh - 30px);
    overflow: auto;
  }

  .videotype {
    display: flex;
    align-items: center;
    z-index: 20;
    max-width: 750rpx;
    padding: 0 50rpx;
    border-bottom-right-radius: 30rpx;
    border-bottom-left-radius: 30rpx;

    image {
      width: 45rpx;
    }
  }

  .indexbox {
    margin-top: 30rpx;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;

    .indexbox_left1 {
      position: relative;
      padding: 0 10rpx;
      margin-bottom: 15rpx;
      width: 100%;
      min-height: 443rpx;
      border-radius: 20rpx;
      overflow: hidden;

      .inl_content {
        margin-top: 10rpx;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        bottom: 0rpx;
      }

      .inox_left_img {
        // position: absolute;
        // top: 0;
        // left: 0;
        width: 100%;
        min-height: 380rpx;
        height: auto;
        background-repeat: no-repeat;
        box-shadow: 0 0rpx 10rpx rgba(51, 51, 51, 0.67);
        background-size: cover;
        background-position: 50%;
        border-radius: 20rpx;
      }

    }

    // margin-bottom: 60rpx;
    .indexbox_left2 {
      position: relative;
      margin-left: 15rpx;
      margin-bottom: 15rpx;
      width: 355rpx;
      height: 603rpx;
      border-radius: 20rpx;
      // overflow: hidden;
      // box-shadow: 0 0rpx 10rpx rgba(51, 51, 51, 0.37);

      .inl_content {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: absolute;
        bottom: 0rpx;
      }

      .inox_left_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 560rpx;
        background-repeat: no-repeat;
        box-shadow: 0 0rpx 10rpx rgba(51, 51, 51, 0.67);
        background-size: cover;
        background-position: 50%;
        border-radius: 20rpx;
      }
    }

    .indexbox_left {
      position: relative;
      margin-top: 15rpx;
      margin-left: 15rpx;
      width: 355rpx;
      height: 305rpx;
      border-radius: 20rpx 20rpx 0 0;
      // background-color: #ddd;

      .inl_content {
        position: absolute;
        width: 98%;
        bottom: 0rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .inox_left_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 355rpx;
        height: 255rpx;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        box-shadow: 0 0rpx 10rpx rgba(51, 51, 51, 0.67);
        border-radius: 20rpx;
      }
    }
  }

  .file-image {
    image {
      width: 100%;
    }
  }

  .indexzxitem10 {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    min-height: 70rpx;

    .image10 {
      margin: 0 auto;
      border-radius: 10rpx;
      width: 96% !important;

      image {
        width: 100%;
      }
    }

    .index_flex2 {
      display: flex;
      align-items: center;
      margin-right: 40rpx;
    }

    .index_flex {
      display: flex;
      align-items: center;
    }

    image {
      width: 40rpx;
      height: 40rpx;
    }

    img {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .indexbox4 {
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;

    margin-bottom: 360rpx;

    .indexbox_left1 {
      top: 30rpx !important;
      transform: translate(10%) scale(0.8) rotate(25deg) !important;
      z-index: 4;
      // transform: translate(-45%) rotate(25deg) scale(0.8) !important;
    }

    .indexbox_left2 {
      top: 30rpx !important;
      transform: translate(-109%) scale(0.8) rotate(-25deg) !important;
      z-index: 4;
      // transform: translate(-55%) rotate(-16deg) scale(0.8) !important;
    }

    .indexbox_left3 {
      top: 30rpx !important;
      transform: translate(-119%) scale(0.8) rotate(-50deg) !important;
      z-index: 3;
      // transform: translate(-55%) rotate(-16deg) scale(0.8) !important;
    }

    .indexbox_left4 {
      top: 30rpx !important;
      transform: translate(19%) scale(0.8) rotate(50deg) !important;
      z-index: 3;
      // transform: translate(-55%) rotate(-16deg) scale(0.8) !important;
    }

    .indexbox_left5 {
      top: 30rpx !important;
      transform: translate(-119%) scale(0.8) rotate(-75deg) !important;
      z-index: 2;
      // transform: translate(-55%) rotate(-16deg) scale(0.8) !important;
    }

    .indexbox_left6 {
      top: 30rpx !important;
      transform: translate(19%) scale(0.8) rotate(75deg) !important;
      z-index: 2;
      // transform: translate(-55%) rotate(-16deg) scale(0.8) !important;
    }

    .indexbox_left0 {
      z-index: 9;
      transform: translate(-50%) !important;
    }

    .indexbox_left0,
    .indexbox_left1,
    .indexbox_left2 {
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: 15rpx;
      margin-bottom: 55rpx;
      width: 260rpx;
      height: 350rpx;
      box-shadow: 0rpx 0rpx 10rpx rgba(51, 51, 51, 0.67);
      border-radius: 30rpx;
      overflow: hidden;
      // background-color: #ddd;

      .inl_content {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -50rpx;
      }

      .inox_left_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        border-radius: 30rpx;
        box-shadow: 0rpx 0rpx 10rpx rgba(51, 51, 51, 0.67);
      }

      .inox_left_icon {
        position: absolute;
        top: 15rpx;
        left: 155rpx;
        width: 70rpx;
        height: 70rpx;
      }
    }
  }
</style>
